<template>
  <a-layout-sider
    :theme="'light'"
    :class="['side-menu', 'beauty-scroll', 'shadow']"
    :collapsible="collapsible"
    v-model="collapsed"
    :trigger="null"
  >
    <div :class="['logo', 'light']">
      <router-link to="/">
        <img v-if="!collapsed" src="@/assets/img/sany_logo.png" />
        <img v-else src="@/assets/img/logo.png" />
      </router-link>
    </div>
    <i-menu
      :collapsed="collapsed"
      :menuRoutes="menuRoutes"
      :selectedKey="selectedKey"
      class="menu"
      :todoNum="todoNum"
    />
    <div class="side-menu-contol">
      <a-icon
        class="trigger"
        :type="collapsed ? 'menu-unfold' : 'menu-fold'"
        @click="toggleCollapsed"
      />
    </div>
  </a-layout-sider>
</template>
<script>
// import IMenu from "./menu";
import IMenu from "./iMenu";
import { mapState } from 'vuex'
import { langMixins } from '@/mixins/lang'
import { getTableToDoNum } from '@/api/globalTodoNum'
export default {
  name: "SideMenu",
  components: { IMenu },
  props: {
    collapsible: {
      type: Boolean,
      required: false,
      default: false,
    },
    theme: {
      type: String,
      required: false,
      default: "dark",
    },
  },
  mixins: [langMixins],
  data() {
    return {
      collapsed: false,
      menuRoutes: [],
      selectedKey: [0],
      todoNum: 0
    };
  },
  created() {
    // const rootRoute = this.$router.options.routes.find(
    //   (item) => item.path === "/"
    // );
    // this.menuRoutes = rootRoute && rootRoute.children;
    this.getcommonMethod(this.$route)
    getTableToDoNum(this.$store)
  },
  computed: {
    ...mapState({
      toDoProcessNum: (state) => state.todoData.toDoProcessNum,
      outTask: (state) => state.todoData.outTask,
      toReviewedTask: (state) => state.todoData.toReviewedTask
    }),
    tabs: function () {
      return this.$store.state.commonData.tabs;
    },
  },
  watch: {
    $route(to, from) {
      // 1. 路由变化的时候，改变tab，左侧菜单，以及选中的当前菜单
      this.setTabs(to);
      this.getcommonMethod(to)
      this.menuRoutes.map((item, index) => {
        if (to.path.includes(item.path)) {
          this.selectedKey.splice(0, 1, index);
        }
      });
    },
    toDoProcessNum(val) {
      this.todoNum = val + this.outTask + this.toReviewedTask
    },
    outTask(val) {
      this.todoNum = val + this.toDoProcessNum + this.toReviewedTask
    },
    toReviewedTask(val) {
      this.todoNum = val + this.toDoProcessNum + this.outTask
    },
    lang: {
      handler(val) {
        this.setRouteByLang(this.menuRoutes)
      },
      deep: true
    }
  },
  mounted() {
    this.initRouter();
  },
  methods: {
    // 获取左侧菜单数据
    getcommonMethod(to) {
      let routerArr = [];
      if (to.path.startsWith("/single")) {
        const rootRoute = this.$router.options.routes.find(
          (item) => item.name === "single"
        );
        routerArr = rootRoute && rootRoute.children;
      } else {
        const rootRoute = this.$router.options.routes.find(
          (item) => item.name === "project"
        );
        routerArr = rootRoute && rootRoute.children;
      }
      this.menuRoutes = routerArr.filter(item=>{
        return item.name != 'PLM待办'
      });
      this.setRouteByLang(this.menuRoutes)
    },
    // 初始路由
    initRouter() {
      // 判断缓存里面有没有tabs数据
      let tabStorageData = JSON.parse(sessionStorage.getItem('tabArr'))
      if (tabStorageData && tabStorageData.length > 0) {
        this.$store.commit("SET_TABS", tabStorageData);
      } else {
        this.setTabs(this.$route);
      }
      // F5刷新定位到当前选中路由菜单
      this.menuRoutes.map((item, index) => {
        if (this.$route.path.includes(item.path)) {
          this.selectedKey.splice(0, 1, index);
        }
      });
      this.setRouteByLang(this.menuRoutes)
    },
    // 设置tab数据，塞入vuex
    setTabs(to) {
      const { path, meta } = to;
      const title = meta.name;
      if (to) {
        const hasShow = this.tabs.find((item) => {
          return item.path === path;
        });
        if (hasShow === undefined) {
          this.tabs.push({ title, path });
        }
        this.$store.commit("SET_TABS", this.tabs);
      }
    },
    onSelect(obj) {
      this.$emit("menuSelect", obj);
    },
    toggleCollapsed() {
      this.collapsed = !this.collapsed;
    },
  },
};
</script>
<style lang="less" scoped>
// @import "index";
.side-menu-contol {
  position: absolute;
  bottom: 0;
  padding: 6px 0;
  padding-right: 10px;
  border-top: 1px solid #eeeeee;
  width: 100%;
  text-align: right;
}
.shadow {
  box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35);
}
.side-menu {
  min-height: 100vh;
  overflow-y: auto;
  z-index: 10;
  /deep/.ant-layout-sider-children {
    min-height: 100%;
    height:auto !important;
    position: relative;
    padding-bottom: 20px;;
  }
  .logo {
    text-align: center;
    height: 64px;
    position: relative;
    line-height: 64px;
    padding: 0px 24px;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    overflow: hidden;
    background-color: #002140;
    &.light {
      background-color: #fff;
    }
    h1 {
      color: #000;
      font-size: 20px;
      margin: 0 0 0 12px;
      display: inline-block;
      vertical-align: middle;
    }
    img {
      // width: 32px;
      width: 90%;
      vertical-align: middle;
    }
  }
  .menu {
    padding: 16px 0;
    max-height: 84vh;
    overflow: hidden;
    overflow-y: scroll;
    /deep/ .ant-menu {
      border-right: none;
    }
  }
}
</style>